<template>
  <div class="meddic-indicator">
    <div class="flex items-center justify-between flex-auto pr-2 max-w-[300px]">
      <div
        v-for="item in cp_meddicInfo"
        :key="item.key"
        class="nav-item"
        @click="onClickItem(item)"
      >
        <div
          class="icon-wrapper rounded-full w-[22px] h-[22px] flex items-center justify-center text-[11px] font-medium"
          :style="{
            backgroundColor: MEDDIC_STATUS_STYLE[item.status]?.bg,
            color: MEDDIC_STATUS_STYLE[item.status]?.text,
            border:
              item.status === MEDDIC_STATUS.NOT_FILLED ? '1px solid #DCDCDC' : 'none',
          }"
        >
          {{ item.icon }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import {
  MEDDIC_STATUS,
  MEDDIC_STATUS_STYLE,
} from "@/views/customerAndBusiness/components/meddic/meddicConstants.js";

const props = defineProps({
  meddicArray: {
    type: Array,
    default: () => ["M", "E", "D", "D", "I", "C"],
  },
  meddicInfo: {
    type: Array,
    default: () => [],
  },
});

const cp_meddicInfo = computed(() => {
  const array = [
    {
      icon: "M",
      title: "衡量标准",
      tooltipContent:
        "Metrics（衡量标准）：客户在购买决策中所关注的具体量化指标，如投资回报率（ROI）、成本节约、生产效率提升等。",
      type: "METRICS",
      status:
        props.meddicInfo.find((item) => item.meddicType == "METRICS")?.meddicStatus ||
        MEDDIC_STATUS.NOT_FILLED,
    },
    {
      icon: "E",
      title: "经济买家",
      tooltipContent:
        "Economic Buyer（经济买家）：在购买过程中具有最终决策权的人物，他们通常关注投资回报和预算等问题。",
      type: "ECONOMIC_BUYER",
      status:
        props.meddicInfo.find((item) => item.meddicType == "ECONOMIC_BUYER")
          ?.meddicStatus || MEDDIC_STATUS.NOT_FILLED,
    },
    {
      icon: "D",
      title: "决策标准",
      tooltipContent:
        "Decision Criteria（决策标准）：客户在评估和选择供应商时所依据的标准，如产品质量、价格、售后服务等。",
      type: "DECISION_CRITERIA",
      status:
        props.meddicInfo.find((item) => item.meddicType == "DECISION_CRITERIA")
          ?.meddicStatus || MEDDIC_STATUS.NOT_FILLED,
    },
    {
      icon: "D",
      title: "决策流程",
      tooltipContent:
        "Decision Process（决策流程）：客户在做出购买决策时所经历的步骤和流程，包括内部审批、评估等环节。",
      type: "DECISION_PROCESS",
      status:
        props.meddicInfo.find((item) => item.meddicType == "DECISION_PROCESS")
          ?.meddicStatus || MEDDIC_STATUS.NOT_FILLED,
    },
    {
      icon: "I",
      title: "痛点",
      tooltipContent:
        "Identify Pain（确定痛点）： 客户在运营过程中面临的挑战和问题，如生产效率低下、成本过高等。",
      type: "IDENTIFY_PAIN",
      status:
        props.meddicInfo.find((item) => item.meddicType == "IDENTIFY_PAIN")
          ?.meddicStatus || MEDDIC_STATUS.NOT_FILLED,
    },
    {
      icon: "C",
      title: "教练",
      tooltipContent:
        "Champion（教练）： 在客户组织内部支持销售人员的关键人物，他们通常对积极态度，并愿意在内部推动购买决策。",
      type: "CHAMPION",
      status:
        props.meddicInfo.find((item) => item.meddicType == "CHAMPION")?.meddicStatus ||
        MEDDIC_STATUS.NOT_FILLED,
    },
  ];

  return array;
});

const getCircleClass = (item) => {
  return {
    completed: item.status === "completed",
    partial: item.status === "partial",
    empty: item.status === "empty",
  };
};

function onClickItem(item) {
  console.log("onClickItem", item);
}
</script>

<style scoped>
.meddic-indicator {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.meddic-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: white;
  transition: all 0.2s ease;
}

.meddic-circle.completed {
  background-color: #409eff;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.meddic-circle.partial {
  background-color: #a0cfff;
  box-shadow: 0 2px 4px rgba(160, 207, 255, 0.3);
}

.meddic-circle.empty {
  background-color: #e4e7ed;
  color: #909399;
  border: 1px solid #dcdfe6;
}
</style>
